iT邦幫忙

2025 iThome 鐵人賽

DAY 22
0
IT 管理

《把瑣事交給 n8n:零基礎自動化工作流實戰》系列 第 22

Day 22: 【n8n x Webhook】利用 Webhook 打造 Line 簡易記帳小幫手

  • 分享至 

  • xImage
  •  

昨天,我們聚焦於工作流的「健壯性」,確保它在出錯時能妥善處理。

今天,我們要來探討另一個核心主題:「即時性」。

到目前為止,我們的工作流大多是主動的:例如依照排程 (Schedule Trigger) 運行,或是由我們手動 (Manual Trigger) 啟動。它們依照自己預設好的節奏工作,而不是根據外部事件。

但真實世界的自動化,更多時候需要的是被動的:像是當「某件事發生時,立即執行某個動作」。例如:當有新訂單時,立即發送通知、當有人填表單時,立刻寫入資料庫、當用戶傳訊息時,馬上觸發回應…等等。 實現這種「事件驅動 (Event-driven)」自動化的關鍵之一,就是我們今天的主角:Webhook

Webhook 就像一個專屬的「數位信箱」。任何外部服務只要知道這個地址,就能把「事件」送進來,而 n8n 只要收到信,就會立刻啟動對應的工作流。

在今天的文章裡,你會學到:

  1. Webhook 的運作原理與使用場景
  2. 如何在 n8n 中建立一個 Webhook Trigger
  3. 如何把 Webhook 接到 Line 官方帳號,接收即時訊息
  4. 打造一個簡易的「記帳機器人」,自動把你的支出記錄下來

這會是我們第一次真正讓 n8n 「聽見外部世界」,並即時作出反應。

以下為今天完成的範例工作流:
https://ithelp.ithome.com.tw/upload/images/20251006/20178017Lj99XldVWk.png

讓我們直接開始今天的內容吧!


一、Webhook 是什麼?

Webhook 這個詞,直譯是「網路掛勾」,但光看字面很抽象。要真正理解它,可以把它想像成 瓦斯管路 + 地址 的組合。

  • 瓦斯管路:代表資料或訊息的流動,瓦斯就是資料。
  • 地址 (Webhook URL):代表「資料要送到哪裡去」。

1. Discord 的案例:把訊息送出去

還記得我們之前做過的 Discord 範例(Day8文章)嗎?

那時候我們的任務,是把 n8n 產生的訊息傳送到 Discord 伺服器。

  1. Discord 伺服器就像「接收瓦斯的房子」。
  2. 它提供給我們一個 Webhook URL(伺服器的地址)。
  3. 我們只要把這個地址設到 n8n 中,n8n 就能沿著管路,把訊息源源不斷送進 Discord。

這是一個 「送出」的流程。n8n 是瓦斯公司,Discord 是收瓦斯的用戶。

2. LINE 的案例:把訊息接進來

今天我們要做的 LINE 範例,方向剛好相反。

這次不是 n8n 主動發送,而是 LINE 官方帳號要把收到的訊息傳遞到 n8n

  1. n8n 這邊要當「收瓦斯的房子」。
  2. 它會提供一個 Webhook URL(n8n 的地址)。
  3. 我們只要把這個地址設定到 LINE 的 Message API Webhook 裡,當有人傳訊息到官方帳號,這些訊息就會沿著管路,流進 n8n,觸發我們的工作流。

這就是一個 「接收」的流程。LINE 官方帳號是瓦斯公司,而 n8n 則是收瓦斯的用戶。

3. 規則

  • 要把訊息「送出去」 → 用對方的 Webhook URL(對方的地址)
  • 要把訊息「接進來」 → 用自己的 Webhook URL(自己的地址)

資料是瓦斯,Webhook URL 是地址。

只要管路接得對,資料就會自動流到該去的地方。

總結來說:如果我要把 A 的資料傳到 B,就要在 A 裡面設定 B 的 Webhook URL。

不過通常要看服務平台是否有提供,就像如果要透過 Line 發送 n8n上的訊息,就沒有辦法利用像之前 DC 那樣的 webhook 去傳送訊息,必須要用 Line Message API 才可以。

二、前置設定

1. Line 官方帳號設定

  • 申請一個 Line 官方帳號

    • 這部分沒有太複雜的設定,可以從 Line Business ID 申請,填入基本資料後,應該會在帳號總覽看得到你剛剛申請的帳號。
      https://ithelp.ithome.com.tw/upload/images/20251006/20178017T1UIBmXMnX.png

    • 點選開帳號,進入該官方帳號的頁面 → 右上角「設定」→ 左側導航欄「回應設定」→ 啟用「聊天」以及「Webhook」
      https://ithelp.ithome.com.tw/upload/images/20251006/20178017GCzovO6CXu.png

  • Google Sheet 建立記帳表格

    • 創建欄位:Timestamp項目金額
    • 可依自己的需求、使用情境去增加,這邊只是舉例。
      https://ithelp.ithome.com.tw/upload/images/20251006/20178017JzOwEVcEBf.png

三、串接/核對/測試 Webhook

1. 串接 Webhook

  • 在 n8n 中新增一個 Webhook Trigger 節點
    https://ithelp.ithome.com.tw/upload/images/20251006/20178017BFR7ZBR6kr.png

  • 複製節點中出現的 Test Webhook URL → 將 HTTP Method 調成POST → 點選「Listen for test event」
    https://ithelp.ithome.com.tw/upload/images/20251006/20178017KVVRXa4u0c.png

  • 點選後,Webhook Trigger 應該會變成「Listening for test event 」狀態
    https://ithelp.ithome.com.tw/upload/images/20251006/20178017t571urk5D9.png

2. 核對(Verify) Webhook

  • 回到 Line Official Account Manager 官方帳號的設定中 → 左側導航欄「Message API」→ 貼上 Test Webhook URL 並儲存 → 點選下方「LINE Developers Console」,進入 Line Developers 頁面
    https://ithelp.ithome.com.tw/upload/images/20251006/20178017RYw9tahG0m.png

  • 選擇剛剛所創立的官方帳號(Channel)→ Messaging API → 往下滑,確認一下 Webhook URL 與剛剛貼上的是否相同,並且下方關於 Webhook 的設定是否開啟
    https://ithelp.ithome.com.tw/upload/images/20251006/20178017i2x0D32c2J.png

    https://ithelp.ithome.com.tw/upload/images/20251006/20178017PxysA1A7Gq.png

  • 點選 「Verify」,正常來說會出現 Success 的視窗
    https://ithelp.ithome.com.tw/upload/images/20251006/20178017wovmrcrUuJ.png

  • 回到 n8n 的 Webhook Trigger 節點,會發現有接收到 test event,trigger產生輸出資料,到這邊就核對成功了。
    https://ithelp.ithome.com.tw/upload/images/20251006/20178017qGVwN7Innl.png

3. 測試 Webhook

  • 再次點選「Listen for test event」按鈕 → 傳送任意訊息到官方帳號中 → 沒意外的話,Webhook Trigger 會接收到剛剛傳的訊息
    https://ithelp.ithome.com.tw/upload/images/20251006/201780174hTP8EkLVr.png

如果成功實作到這邊,就代表你已經成功將 Line 官方帳號與 n8n 掛起來了,n8n 就能接收到這些傳到官方帳號中的訊息了。

需要注意的是,我們之前使用的都是 Test URL,這種方式必須在 Webhook Trigger 處於 Listening 狀態時,才能成功接收訊息。

如果希望 Webhook 可以 隨時接收官方帳號傳來的所有訊息,就必須使用 Production Webhook URL,同時將工作流設為 Active 模式。這樣 Webhook 才能持續運作,不受 Listening 狀態限制。

不過,啟用 Production URL 後,就無法在節點編輯頁面直接查看收到的訊息,只能透過工作流的 Execution 頁籤查看。

因此,實務上建議在開發與測試階段仍以 Test URL 為主,並保持 Webhook Trigger 在 Listening 狀態,以確保能順利接收訊息。

到這裡我們就完成將官方帳號中的訊息瓦斯管接到 n8n 中了:Line 的訊息會流入 n8n,觸發工作流,而接下來,我們就是要針對使用者傳到官方帳號中的訊息進行近一步的解析與處理。


四、訊息解析與處理

在成功將 Line 官方帳號接收到的訊息傳入 n8n 之後,會發現 Webhook Trigger 輸出的資料有點複雜,而我們今天的例子是要做簡易的記帳小幫手,因此我們需要先過濾出我們要的訊息(用 Edit Fields 節點) → 利用 AI 解析訊息,從使用者傳的文字中分析出要記帳的花費、買的東西(最好還是 JSON 格式,所以這邊會用 AI Agent 節點) → 將記帳內容寫入 Google Sheet 中。

1. 過濾 Line 訊息

  • 使用 Edit Fields 節點提取出使用者傳的內容以及 replyToken
    https://ithelp.ithome.com.tw/upload/images/20251006/20178017MEGy612gPt.png

附註:為什麼需要 replyToken?

在後續回覆使用者訊息時,我們需要知道要回覆給誰,而 Line Webhook 輸出的資料中,有兩個參數可以用來識別使用者:

  1. replyToken:Line 事件中每條訊息都會附帶的唯一回覆憑證,用於呼叫 Message API → Reply 回覆該使用者。每個 replyToken 只能使用一次,因此必須在收到訊息時立即使用。
  2. userId:使用者的唯一識別 ID。如果想針對特定使用者傳送訊息,可以用這個 ID 作為鍵值,呼叫 Message API → Push 方式傳送訊息。

(關於 Message API 的實際傳遞方式,我們會在後面章節詳細說明)

2. 分析 Line 訊息

使用者傳遞的訊息往往不會完全按照固定格式,如果強制要求格式,可能會降低使用者體驗。為了更靈活地處理,我們使用 AI Agent 節點來解析使用者訊息,並將其轉換成 JSON 格式的結構化資料。

  • Edit Fields 節點之後,新增一個 AI Agent 節點,並設定 Prompt 與 Output Parser。
    https://ithelp.ithome.com.tw/upload/images/20251006/20178017kzdPW4Kj7m.png

    https://ithelp.ithome.com.tw/upload/images/20251006/20178017caFqBnRBG3.png

    https://ithelp.ithome.com.tw/upload/images/20251006/201780174W0xExmpUG.png

  • 如果希望一次處理多筆記帳項目,需要注意:

    • AI Agent 無法直接輸出多個 item。即使在提示詞中請它將每筆花費整理成一個 item,最終仍會被包成一個 output list。
    • 因此,後續需要將這個 output list 拆分成多個 item,才能將每筆花費分別寫入 Google Sheet 的一列中。
      https://ithelp.ithome.com.tw/upload/images/20251006/201780175xI0VPfL0k.png

3. 寫入 Google Sheet

  • 使用 Google Sheets → Append Row 節點,將解析好的欄位寫入表格。(1個item會執行一次、寫入一列)

  • 同時可以把 Timestamp 設為 {{$now.format("yyyy年MM月dd日 HH:mm")}}
    https://ithelp.ithome.com.tw/upload/images/20251006/20178017ZEdhTDLtC6.png

  • 成果如下:
    https://ithelp.ithome.com.tw/upload/images/20251006/20178017t5R5DCwjGm.png


五、回傳訊息

1. 如何回覆使用者訊息

  • 使用 Line Message API(HTTP Request 節點)

  • 需要先取得 channel access token:進入 Line Developer 官方照頻道 → Message API → 滑到最下面,就會看到 channel access token。
    https://ithelp.ithome.com.tw/upload/images/20251006/20178017afgavng7O2.png

  • 將此 token 加入 Bearer Auth Credentials 方便後續調用。
    https://ithelp.ithome.com.tw/upload/images/20251006/201780174CSJuXU4HA.png

  • 發送「已幫你完成記帳」訊息。

  • 節點設定:

    • MethodPOST
    • URLhttps://api.line.me/v2/bot/message/reply
    • Authentication:選剛剛新增的Line Bearer Credential
    • 開啟 send bodyBody content typeJSONSpecify bodyUsing JSON
    • JSON 欄位填入:
    {
    "replyToken": "{{ $('Edit Fields').item.json.replyToken }}", // reply token,可以從前面的節點拉
    "messages": [
    {
    "type": "text", //訊息種類:文字訊息
    "text": "已幫你完成記帳"  //文字訊息內容
    }
    ]
    }
    

    https://ithelp.ithome.com.tw/upload/images/20251006/20178017yWPAwAcMU2.png

    • 由於 reply token 只能使用一次,如果一次訊息包含多筆花費,會在 Google Sheet 生成多個 item。為了避免多次觸發回覆訊息,我們將「Execute Once」選項開啟,以確保訊息只發送一次。
      https://ithelp.ithome.com.tw/upload/images/20251006/20178017yGFWvSAzNx.png

上述步驟都設定完成後,只要將 Line 官方帳號的 Webhook URL 改成我們的 prodution URL 並且將工作流調成 active 狀態,這個專屬於你的簡易記帳小助手就正式上線了!


六、結語與明日預告

今天,我們親手打造了一個功能完整的 Line 記帳機器人,並成功建立了一條從監聽到回應的自動化閉環。讓我們來回顧一下這趟精彩的旅程:

  1. 我們設定了 Webhook,讓 n8n 能夠即時接收 Line 官方帳號的訊息。
  2. 我們解析了傳入的訊息,並將其工整地寫入了 Google Sheet
  3. 最後,我們呼叫 Messaging API,向使用者回傳了一則確認訊息。

整個流程就像一條精密的「數位管線」:來自 Line 的用戶訊息,如同源源不絕的數據「燃料」,流經我們的 n8n 工作流,點燃了記帳、存儲的自動化引擎,最終再以一則確認訊息的形式,將成果回饋給用戶。

當然,我們這位剛上工的記帳助理還很單純,他聽不懂記帳以外的閒聊(傳入與記帳不相關的訊息他可能會傻傻的照樣處理),也看不懂用戶遞過來的照片。

明天,我們就要為這位助理進行一次全面的能力升級,讓他學會:

  • 辨識意圖:我們將教他判斷使用者的訊息是否與記帳相關,從而過濾掉無效資訊。
  • 看懂圖片:我們將讓他學會接收並處理使用者傳來的圖片訊息(例如發票照片)。
  • 靈活應對:我們將探索更深入的 Webhook 應用,讓機器人的反應更靈活、更人性化。

準備好將你的 LINE 機器人,從一個只會聽指令的「答錄機」,進化成一個能聽懂人話、看懂圖片的「智慧助理」了嗎?我們明天見!


上一篇
Day 21: 【n8n x 錯誤處理】從 Error Trigger 到 AI 診斷,打造智慧錯誤儀表板
系列文
《把瑣事交給 n8n:零基礎自動化工作流實戰》22
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言